<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />

</head>

<body style="color:black">
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup(event)" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <input type="button" name="bt" id="button2" value="确认2" />
        </div>
        <div>
            <div id="todogroup">
                <!-- <div id ="todo0"><input type="checkbox" name="todocheck">吃饭<button type="button(0)">删除</button></div> -->
                <!-- <div>睡觉<button type="button(0)">删除</button></div> -->
            </div>
            <!-- <span style="color:blue;">&nbsp;&nbsp;</span> -->
            <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')">
                <div></div>


            </div>
        </div>
</body>
<script lang="javascript">
    var intCnt = 0;
    function init() {
        //alert("welcome!");
        //console.log("xxx");
        document.getElementById("button2").onclick = handleClick;
        //console.log('xxxxxx');
    }
    function keyup(e) {
        console.log(e);
        if (e.keyCode == 13) {
            handleClick();
        }
    }
    function handleClick(e) {
        console.log('handleClick');
        console.log(e);
        //var temp=document.getElementsByClassName("bt");
        // var temp = document.getElementById("inputtext");
        // console.log(temp.value);
        // document.getElementsByClassName("main")[0].style = "background-color: #333;";
        var tem = getValue();
        // <div id ="todo0"><input type="checkbox" name="todocheck">吃饭<button type="button">onclick="deleteByIndex()</div>
        // document.getElementById("todogroup").innerHTML += "<div>" + tem + "</div>"
        // var div=document.createElement('div');
        // div.innerText =tem;
        // document.getElementById("todogroup").append(div);
        var div = document.createElement('div');

        document.getElementById("todogroup").innerHTML += "<div class='item' id ='todo"
            + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
            + tem + "</div><button class='item-del' type='button'onclick='deleteByIndex(" + intCnt + ")'>删除</button></div>";
        document.getElementById("inputtext").value = "";
        intCnt++;
    }
    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }
    function deleteByIndex(index) {
        document.getElementById("todo" + index).remove();

    }

    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .main {
        /* background-color: aqua; */
        /* height: 200px; */
        padding: 8px;
        border: 1px solid #333333;
        border-radius: 8px;
    }

    .row {
        display: flex;
    }

    .item {
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
    }

    .item-value {
        flex-grow: 1;
        color: #000000;
    }

    .item-del {
        color: aliceblue;
        background-color: red;
        border: 0px;
        opacity: 0;
    }

    .item:hover .item-del {
        opacity: 1;
    }

    .input {
        padding: 8px;
        outline: none;
        border: 2px solid #b1afaf;
    }

    .input:focus {
        box-shadow: 0px 0px 10px #3762d9;
        border: 2px solid #3762d9;
    }
</style>

</html>